<template>
    <div class="homeContent">
        <div class="topInfo">
            <div class="itemList">
                <div class="item">
                    <div class="itemText">财务总金额</div>
                    <div class="val">89999999</div>
                </div>
                <div class="item">
                    <div class="itemText">已还</div>
                    <div class="val">88888</div>
                </div>
                <div class="item">
                    <div class="itemText">待还</div>
                    <div class="val">5000</div>
                </div>
            </div>
            <div class="itemList">
                <div class="item">
                    <div class="itemText">收账总金额</div>
                    <div class="val">2444</div>
                </div>
                <div class="item">
                    <div class="itemText">已收</div>
                    <div class="val">5888</div>
                </div>
                <div class="item">
                    <div class="itemText">未收</div>
                    <div class="val">5000</div>
                </div>
            </div>
        </div>
        <div class="more" @click="handleSel">{{ text }} <van-icon name="replay" />
            <div class="select" v-show="showSel">
                <div class="item" v-show="showSel" @click="handleSelItem(item)" v-for="(item, index) in options"
                    :key="index">
                    {{ item.label }}
                </div>
            </div>
        </div>
        <!-- <button @click="showSel=!showSel">test</button> -->
        <div class="middleInfo">
            <div class="itemList">
                <div class="item" v-for="(item, index) in 20" :key="index">
                    <div class="img">
                        <img src="../../assets/img/zfb.jpg" alt="">
                    </div>
                    <div class="info">

                        <div class="top">
                            <div class="type">类型：<span>分期</span></div>
                            <div class="name">消费名称：<span>购买Nike运动鞋</span></div>
                        </div>
                        <div class="total">
                            <div class="left">
                                <span class="yue">待还</span>
                                <div class="val">2444</div>
                            </div>
                            <div class="middle">
                                <div class="benqi">总金额：<span>3000</span></div>
                                <div class="yihuan">已还：<span>50</span></div>
                            </div>
                            <div class="right">
                                <div class="time">下次还款时间</div>
                                <div class="val">2025年1月8日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomInfo">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="home-o">主页</van-tabbar-item>
                <van-tabbar-item icon="search">记账</van-tabbar-item>
                <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
                <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: true,
            active: 0,
            showSel: false,
            text: '全部',
            options: [
                {
                    label: '全部',
                    value: 0
                },
                {
                    label: '消费',
                    value: 1
                },
                {
                    label: '收入',
                    value: 2
                },
            ]
        }
    },
    created() {

    },
    methods: {
        handleShow(flag) {
            console.log(123);
            if (flag == '0') {
                console.log(1230);
                this.show = false;
            } else if (flag == '1') {
                this.show = true;
            }
        },
        handleSel() {
            this.showSel = true
        },
        handleSelItem(item) {
            this.text = item.label
            setTimeout(() => {
                this.showSel = false
            }, 100);
        }
    }
};
</script>

<style lang="less" scoped>
.homeContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;

    .topInfo {
        height: 120px;
        background-color: #007aff;
        border-radius: 15px;
        padding: 20px 15px 10px;

        display: flex;
        flex-direction: column;

        .zzc {
            display: flex;
            justify-content: center;
            color: #fff;
            font-size: 18px;

            i {
                display: flex;
                align-items: center;

                &::before {
                    padding-top: 2px;
                }
            }
        }

        .total {
            display: flex;
            justify-content: center;
            font-size: 22px;
            color: #fff;
            margin: 10px 0;
            font-weight: 800;
        }

        .itemList {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;

            .item {
                flex: 1;

                .itemText {
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                }

                .val {
                    margin-top: 5px;
                    font-size: 16px;
                    font-weight: 800;
                    text-align: center;
                }

                color: #fff;
            }
        }
    }

    .more {
        text-align: right;
        color: #007aff;
        margin: 10px 0;
        position: relative;

        .select {
            position: absolute;
            width: 120px;
            border-radius: 12px;
            background-color: #c1c1c1;
            right: 0;

            .item {
                color: #fff;
                text-align: center;
                margin-bottom: 5px;
            }
        }
    }

    .middleInfo {
        display: flex;
        height: 70%;

        .itemList {
            height: 100%;
            width: 100%;
            overflow: auto;

            .item {
                display: flex;
                flex: 1;
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0px;
                }

                .img {
                    width: 50px;
                    height: 100%;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;

                    img {
                        border-radius: 8px;

                        width: 50px;
                        height: 50px;
                    }
                }

                .info {
                    flex: 1;
                    margin-left: 20px;
                    background-color: #f2f2f2;
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding: 8px;

                    .top {
                        display: flex;
                        justify-content: space-between;
                        color: #007aff;

                        span {

                            color: black;
                        }

                    }

                    .total {
                        display: flex;
                        justify-content: space-between;

                        span {
                            flex: 1;
                            text-align: center;
                            font-size: 15px;
                        }

                        .left {
                            .yue {
                                width: 100%;
                                text-align: center;
                                font-size: 12px;
                                display: inline-block;
                                color: #007aff;
                            }

                            .val {
                                color: red;
                                font-size: 25px;
                            }
                        }

                        .middle {

                            .benqi,
                            .yihuan {
                                color: #007aff;

                                span {
                                    color: black;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>